<template>
  <div class="echart-pie-wrap">
    <editor ref="myEditor" @init="editorInit" :value="value" :lang="language" :theme="theme" :options="options">
    </editor>
  </div>
</template>

<script>
import aceEditor from "vue2-ace-editor";
export default {
  components: {
    //   editor: require('vue2-ace-editor'),
    editor: aceEditor
  },

  props: {
    title: {
      type: String,
      default: "编辑器"
    },
    value: {
      type: String,
      default: ""
    },
    theme: {
      type: String,
      default: "chrome"
    },
    language: {
      type: String,
      default: "html"
    }
  },
  data() {
    return {
      options: {
        // enableBasicAutocompletion: true, // 启用基本自动完成
        // enableSnippets: true, // 启用代码段
        // enableLiveAutocompletion: true, // 启用实时自动完成
        // printMarginColumn: 30,
        // displayIndentGuides: false, // 显示参考线
        // enableEmmet: true, // 启用Emmet
        // tabSize: 6, // 标签大小
        // fontSize: 14, // 设置字号
        // useWorker: true, // 使用辅助对象
        // showPrintMargin: false, //去除编辑器里的竖线
        // enableMultiselect: true, //     选中多处
        // readOnly: false, // 是否只读
        // showFoldWidgets: true, // 显示折叠部件
        // fadeFoldWidgets: true, // 淡入折叠部件
        // wrap: true //换行
        wrap: true, // 换行
        enableLiveAutocompletion: true, // 智能补全
        displayIndentGuides: false,// 显示参考线
        showPrintMargin: false, //去除编辑器里的竖线
        enableSnippets: true, // 启用代码段
      }
    };
  },
  methods: {
    editorInit: function (editor) {
      // require("brace/theme/iplastic");
      // // 代码片段
      // require("brace/snippets/javascript");
      // require("brace/snippets/dockerfile");
      // require("brace/snippets/python");
      // require("brace/snippets/php");
      // require("brace/snippets/html");
      // require("brace/snippets/css");

      // // 代码语言
      // require("brace/mode/javascript");
      // require("brace/mode/dockerfile");
      // require("brace/mode/python");
      // require("brace/mode/php");
      // require("brace/mode/html");
      // require("brace/mode/ruby");
      // require("brace/mode/css");
      // // 语言扩展
      // require("brace/ext/language_tools");
      // require("brace/ext/emmet");
      // require("brace/ext/beautify");
      // require("brace/ext/searchbox");
      // require("brace/ext/chromevox");
      // require("brace/ext/error_marker");
      // require("brace/ext/keybinding_menu");
      // require("brace/ext/linking");
      // require("brace/ext/modelist");
      // require("brace/ext/old_ie");
      // require("brace/ext/settings_menu");
      // require("brace/ext/spellcheck");
      // require("brace/ext/split");
      // require("brace/ext/static_highlight");
      // require("brace/ext/statusbar");
      // require("brace/ext/whitespace");
      // require("brace/ext/textarea");
      // require("brace/ext/themelist");

        require("brace/ext/language_tools");
      require("brace/ext/beautify");
      require("brace/mode/html");
      require("brace/mode/json");
      require("brace/mode/sql");
      require("brace/mode/javascript");
      require("brace/mode/less");
      require("brace/theme/chrome");
      require("brace/snippets/javascript");
      require("brace/snippets/json");
      require("brace/snippets/sql");
      // editor.setReadOnly(true) // 设置只读
      // 监听编辑器变化
      editor.getSession().on("change", () => {
        this.$emit("change", editor.getValue());
      });
    }
  }
};
</script>
<style scoped>
.echart-pie-wrap {
  width: 100%;
  height: 500px;

}

.myEditorTop {
  height: 45px;
  display: flex;
  align-items: center;
  background-color: #333;
  padding-left: 50px;
  color: rgb(241, 238, 8);
  font-weight: bold;
}
</style>